﻿@page "{id:int}"
@model DotNetStar.TheKing.Web.Pages.DetailModel
@{
    ViewBag.Title = Model.ContentModel.Subject;

    var hasLike = Model.HasLike.ToString().ToLower();

}

@await Component.InvokeAsync($"Detail{Model.ContentModel.Channel}", new { content=Model.ContentModel, comments = Model.Comments })



@section styles{
    <link href="https://cdn.bootcss.com/codemirror/5.34.0/codemirror.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/highlight.js/9.12.0/styles/vs.min.css" rel="stylesheet">
}
@section scripts{
    <script src="https://cdn.bootcss.com/codemirror/5.34.0/codemirror.min.js"></script>
    <script src="https://cdn.bootcss.com/marked/0.3.12/marked.min.js"></script>
    <script src="https://cdn.bootcss.com/highlight.js/9.12.0/highlight.min.js"></script>
    <script src="https://cdn.bootcss.com/bootbox.js/4.4.0/bootbox.min.js"></script>
    @Html.Partial("Shared/_ValidationScripts")
    <script>
        //$('.markdown-body').html(marked($('#ArticleContent').val()));
        //$('.markdown-body pre code').each(function (i, block) {
        //    hljs.highlightBlock(block);
        //});

        new Vue({
            el: '#comment',
            data: {
                comment: '',
                height: 'auto',
                inputHeight:0,
            },
            mounted: function () {
                this.inputHeight = parseInt($('#comment').find('textarea').height());

            },
            methods: {
                submit: function () {
                    var v = this;
                    $.ajax({
                        url: '@Url.Page("Detail", "Comment")',
                        type: 'post',
                        data: {
                            body: v.comment,
                            contentId: '@Model.ContentModel.Id'
                        },
                        success: function () {
                            location.reload();
                        },
                        error: function (data) {
                            console.log(data);
                            bootbox.alert('提交失败');
                        }
                    });
                },
                focus: function () {
                    let v = this;
                    let currentHeight = this.inputHeight;
                    var id = setInterval(function () {
                        currentHeight += 10;
                        v.height = currentHeight + 'px';
                        if (currentHeight >= 150) {
                            clearInterval(id);
                            return;
                        }
                    }, 20);
                },
                blur: function () {
                    let v = this;
                    let currentHeight = parseInt(v.height.replace('px', ''));
                    var id = setInterval(function () {
                        currentHeight -= 10;
                        v.height = currentHeight + 'px';
                        if (currentHeight <= v.inputHeight) {
                            v.height = 'auto';
                            clearInterval(id);
                            return;
                        }
                    }, 20);
                }
            }
        });

        function saveComment() {
            var comment = $('#comment').val();
            if (comment.length < 5) {
                bootbox.alert('评论不能少于5个字');
                return;
            }


        }

        /**
         * 删除帖子
         * @@param id 帖子Id
         */
        function removeContent(id) {
            bootbox.confirm('删除后将不可操作，确定吗？', function (result) {
                if (result) {
                    $.post('@Url.Page("Detail", "Delete")', { contentId: id },
                        function (data) {
                            bootbox.alert('帖子已被删除', function () {
                                location.href = '@Url.Page("/Index")';
                            });
                        })
                }
            })
        }
        @if (Model.ContentModel.IsAsk)
        {
            <text>

                    /**
                     * 设置最佳答案
                     */
                    function setBestAnswer(commentId, contentId) {
                        bootbox.confirm('确定要设置这个为最佳答案吗？', function (result) {
                            if (result) {
                                $.ajax({
                                    url: '@Url.Page("Detail", "SetBestAnswer")', 
                                    data: { contentId: contentId, commentId: commentId },
                                    type:'post',
                                    success: function (data) {
                                        if (!data) {
                                            bootbox.alert('设置成功，该用户会收到您提供的奖励', function () {
                                                location.reload();
                                            });
                                        } else {
                                            bootbox.alert(data.responseText);
                                        }
                                    },
                                    error: function (data) {
                                        bootbox.alert(data.responseJSON[0]);
                                    }
        });
                }
            })
        }
        </text>
        }

        @if (!Model.ContentModel.IsAsk)
        {
                    <text>


                /**
                 * 点赞
                 */
            new Vue({
            el: '#like',
            data: {
                hasLike: false,
                likeNum:0
            },
            mounted: function () {
                this.hasLike =@hasLike,
                    this.likeNum =@Model.ContentModel.LikeNum;
            },
            computed: {
                likeClass: function () {
                    return this.hasLike ? 'fas' : 'far'
                }
            },
            methods: {
                like: function () {
                    let v = this;
                    if (v.hasLike) {
                        return;
                    }
                    let index = layer.load(2);
                    $.ajax({
                        url: '@Url.Page("Detail", "Like")',
                        data: { id: '@Model.ContentModel.Id' },
                        type: 'post',
                        success: function (data) {
                            v.likeNum = data.likeNum;
                            v.hasLike = data.hasLike;
                            $.pointTip();
                        },
                        complete: function () {
                            layer.close(index);
                        }
                    })
                }
            }
        });


        function payContent() {
            bootbox.confirm({
                closeButton: false,
                title: '交学费',
                message: '将支付 <span class="text-danger"><b>@(Model.ContentModel.Cost)个</b></span> 金币的学费给作者，确定吗？',
                buttons: {
                    confirm: {
                        className: "btn btn-success",
                        label: "<i class='fa fa-check'></i> 确定支付"
                    },
                    cancel: {
                        className: "btn btn-secondary",
                        label: "<i class='fa fa-times'></i> 不，我还没想好"
                    }
                },
                callback: function (result) {
                    if (result) {
                        var index = layer.load(2);
                        $.ajax({
                            url: '@Url.Page("Detail", "Pay")',
                            data: { id: '@Model.ContentModel.Id' },
                            type: 'post',
                            success: function () {
                                bootbox.alert('您已成功支付了学费', function () {
                                    location.reload();
                                })
                            },
                            error: function (data) {
                                console.error(data);
                                bootbox.alert({ closeButton: false, title: '支付失败', message: data.responseText });
                            },
                            complete: function () {
                                layer.close(index);

                            }
                        })

                    }
                }
            })
        }
            </text>
        }



    </script>
}